<template>
  <div class="musicdetail" @click.stop=''>
    <img :src="playList[index].al.picUrl" alt="" class="bac">
    <div class="Top">
        <div class="Top_left">
            <div @click="changeShow(false)"><span class="icon-arrow-left2"></span></div>
            <div>
              <div class="songName"><marquee direction="right" scrollamount="1">{{playList[index].name}}</marquee></div>
              <div class="songer"><span v-for="(item,index) in playList[index].ar" :key="index">{{item.name}}&nbsp;</span></div>
            </div>
        </div>
        <div class="Top_right"><div><span class="icon-cogs"></span></div></div>
    </div>
    <div class="Body" @click="isLyricShow=!isLyricShow">
      <div class="motion_picture" v-show="isLyricShow">
      <img class="needle" :class="{needle_active:!isShow}" src="https://s3.music.126.net/mobile-new/img/needle-ab.png?4b81da043356110081e5ccaed2e6f2ad=" alt="">
      <img class="disk" src="https://p5.music.126.net/obj/wo3DlcOGw6DClTvDisK1/4602256867/5855/63fb/325b/d7e4e3a244701ee85fecb5d4f6b5bd57.png?imageView=&quality=75&thumbnail=200y200" alt="">
      <img class="disk_img" :class="{disk_img_active:!isShow,disk_img_pause:isShow}"  :src="playList[index].al.picUrl" alt="">
      </div>
      <div class="lyric" v-show="!isLyricShow" >
        <p v-for="(item,index) in myLyric" :key="index" :class="{p_active:(currentTime*1000<item.pre&&currentTime*1000>=item.time)}">{{item.lrc}}</p>
      </div>
    </div>
    <div class="Bottom">
      <div class="icoList">
        <div><span class="icon-heart"></span></div>
        <div><span class="icon-download"></span></div>
        <div><span class="icon-cool2"></span></div>
        <div><span class="icon-bubble"></span></div>
        <div><span class="icon-spinner"></span></div>
      </div>
      <div class="progress_bar">
        <input type="range" min="0" :max="duration" v-model="currentTime" step="0.05">
      </div>
      <div class="play_function">
        <div class="model"><span class="icon-loop2"></span></div>
        <div class="previous" @click="be_last"><span class="icon-previous"></span></div>
        <div class="play" @click="isPlay"><span class="icon-play1" v-if="isShow"></span><span class="icon-pause" v-if="!isShow"></span></div>
        <div class="next" @click="be_next"><span class="icon-next"></span></div>
        <div class="list"><span class="icon-list-numbered"></span></div>
      </div>
    </div>
  </div>
</template>

<script scoped>
import {mapState,mapMutations, mapActions} from 'vuex';
export default {
    props: ['isPlay'],
    data() {
      return {
        isLyricShow: true,
      }
    },
    computed: {
      ...mapState(['playList','index','isShow','lyric','lyricArr','currentTime','duration']),
      myLyric() {
        let arr;
        if(this.lyric) {
            arr=this.lyric.split(/[(\n\r)\r\n]+/).map(item=>{
              let min=item.slice(1,3);
              let sec=item.slice(4,6);
              let mill=item.slice(7,10);
              let lrc=item.slice(11);
              let time=parseInt(min)*60*1000+parseInt(sec)*1000+parseInt(mill);
              if(isNaN(Number(mill))){
                mill=item.slice(7,9);
                lrc=item.slice(10);
                time=parseInt(min)*60*1000+parseInt(sec)*1000+parseInt(mill);
              }
              //console.log(min,sec,mill,lrc);
              return {min,sec,mill,lrc,time};
            })
            arr.forEach((item,i) => {
              if(i===arr.length-1) item.pre=0;
              else item.pre=arr[i+1].time;
            });
        }
        return arr;
      }
    },
    methods: {
      ...mapMutations(['changeShow','changeIndex_vuex']),
      xx(){console.log(xx);},
      be_last() {
        if(this.index>=1) this.changeIndex_vuex(this.index-1);
      },
      be_next() {
        let l=this.playList.length;
        if(this.index<=l-2) this.changeIndex_vuex(parseInt(this.index)+1);
      },
      
    },
    watch: {
      currentTime() {
        let p=document.querySelector('.p_active');
        //console.log(p);
        if(p&&p.offsetTop>300) {
          document.querySelector('.lyric').scrollTop=p.offsetTop-300;
        }
      }
    },
    created() {
      
    },
    mounted() {

    },
    updated() {
      
    }
}

</script>

<style scoped>
.musicdetail {
  padding: .2rem;
}
.bac {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  filter: blur(70px);
}
.Top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.Top_left>div:nth-child(1) {
  float: left;
  font-size: .5rem;
  color: #fff;
}
.Top_left>div:nth-child(2) {
  float: left;
  margin-left: .4rem;
}
.songName {
  color: #fff;
}
.songer {
  opacity: .7;
  font-size: .25rem;
}
.Top_right {
  font-size: .5rem;
  color: #fff;
}
.motion_picture {
  width: 100%;
  height: 9rem;
  display: flex;
  position: relative;
  align-items: center;
  flex-direction: column;
}
.needle {
  width: 2.3rem;
  height: 3rem;
  position: absolute;
  left: 46%;
  transform-origin: 0 0;
  transform: rotate(-10deg);
  transition: all 2s;
}
.needle_active {
  width: 2.3rem;
  height: 3rem;
  position: absolute;
  left: 46%;
  transform-origin: 0 0;
  transform: rotate(2deg);
  transition: all 2s;
}
.disk {
  width: 5rem;
  height: 5rem;
  position: absolute;
  bottom: 2.3rem;
  z-index: -1;
}
.disk_img {
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  position: absolute;
  bottom: 3.14rem;
  animation: rotate_img 10s linear infinite;
}
.disk_img_active {
  animation-play-state: running;
}
.disk_img_pause {
  animation-play-state: paused;
}
@keyframes rotate_img {
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}
.lyric {
  width: 100%;
  height: 9rem;
  overflow: scroll;
  margin-top: .2rem;
}
.lyric p {
  text-align: center;
  color: #fff;
  margin: .4rem auto;
  opacity: .7;
}
.p_active {
  font-size: .6rem;
  opacity: 1!important;
}



.icoList {
  position: fixed;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: .5rem;
  color: #fff;
  opacity: .7;
  left: 0;
  bottom: 2.3rem;
}
.play_function {
  position: fixed;
  padding: .2rem;
  width: 100%;
  height: 1.4rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: .5rem;
  color: #fff;
  opacity: .7;
  bottom: 0;
  left: 0;
}
.play {
  font-size: .9rem;
}
.progress_bar {
  position: fixed;
  bottom: 1.5rem;
  left: 0;
  width: 100%;
  padding: 0 .2rem;
}
.progress_bar input {
  width: 100%;
}
</style>